<template>
  <div class="ocxStyle">
    <div id="playerContainer"></div>
  </div>
  <sdk ref="sdk"/>
  <div>UUID：{{ uuid }}</div>
  <div>登录用户ID：{{ userId }}</div>
  <div>句柄：{{ findHandle }}</div>
  <div>
    <button @click="initPlugin">点我有惊喜</button>
    <button @click="loginVMS">登录</button>
    <button @click="findChlListHandle">获取句柄</button>
    <button @click="getCameraList">查询摄像头列表</button>
  </div>
  <div>
    <button @click="focusWindow">获取焦点窗口</button>
    <button @click="stopRealPlay">停止预览</button>
    <button @click="openRealPlay">开启预览</button>
    <button @click="logout">设备注销</button>
  </div>
  <ul>
    <li>通道名称</li>
    <li>渠道ID</li>
  </ul>
  <ul v-for="item in cameraList" key="{{ item.dwChannelID }}">
    <li>{{ item.szChnName }}</li>
    <li>{{ item.dwChannelID }}</li>
  </ul>
</template>

<script>
import sdk from "./components/sdk/SdkOperate.vue";

export default {
  name: 'App',
  components: {
    sdk
  },
  mounted() {
    // TODO 可能socket连接还没完成导致失败
    // this.initPlugin();
  },
  data() {
    return {
      // 控件初始化uuid
      uuid: '',
      // 分屏数量
      lWndNum: 4,
      // VMS ip
      ip: '192.168.70.142',
      // VMS 端口
      port: '80',
      // VMS 用户名
      userName: 'root',
      // VMS 密码
      password: 'Ymkj666666*',
      // VMS 设备类型，写死VMS
      deviceType: '501',
      // VMS 协议
      protocol: 1,
      // 登录用户ID
      userId: -1,
      // 摄像头列表查询句柄
      findHandle: -1,
      // 摄像头列表
      cameraList: [],
      // 获得焦点的窗口id
      lResId: -1,
      // 要播放的摄像头IP
      realPlayCameraIp: '192.168.70.167',
    }
  },
  methods: {
    // 初始化插件
    initPlugin: function () {
      const _this = this;
      _this.$refs.sdk.initializePlugin(function (res) {
        _this.uuid = res.data.uuid;
        const oldTitle = document.title;
        document.title = res.data.uuid;
        const pos = utils.BROWER.getWndPostion('playerContainer', utils.BROWER.getCreateWndMode());
        const browser = utils.BROWER.browserType();
        // 初始化窗口
        _this.$refs.sdk.initializeWindow({
          uuid: _this.uuid,
          strClassSpace: browser.ClassSpace,
          strVersion: browser.Version,
          lLeft: pos.x,
          lTop: pos.y,
          lWidth: pos.width,
          lHeight: pos.height,
          lFocusColor: 0x3399ff,
          lUnfocusColor: 0x646464,
          lBackground: 0x000000,
          lMaxPlays: 30
        }, function () {
          document.title = oldTitle;
          // 开启分屏
          _this.$refs.sdk.splitScreen({
            uuid: _this.uuid,
            lWndMode: 0,
            lWndNum: _this.lWndNum
          }, function (res) {
          });
        });
      });
    },
    // 登录VMS
    loginVMS: function () {
      const _this = this;
      _this.$refs.sdk.devLogin({
        szIPAddr: _this.ip,
        dwPort: _this.port,
        szUserName: _this.userName,
        szPassword: btoa(_this.password),
        dwLoginProto: _this.protocol,
        dwDeviceType: _this.deviceType,
        uuid: _this.uuid
      }, function (res) {
        _this.userId = res.data.UserID;
      });
    },
    // 摄像头列表查询句柄
    findChlListHandle: function () {
      const _this = this;
      _this.$refs.sdk.findCameraListHandle({
        uuid: _this.uuid,
        UserID: _this.userId
      }, function (res) {
        _this.findHandle = res.data.findHandle;
      });
    },
    // 获取摄像头列表
    getCameraList: function () {
      const _this = this;
      const findCameraParam = {
        uuid: _this.uuid,
        findHandle: _this.findHandle
      };
      _this.$refs.sdk.queryCameraList(findCameraParam, function (res) {
        if (res.code !== 0) {
          _this.$refs.sdk.closeCameraQuery(findCameraParam, function (res) {
          });
        } else {
          _this.cameraList.push(res.data);
          // 递归搜索摄像头
          _this.getCameraList();
        }
      });
    },
    // 获取焦点窗口
    focusWindow: function () {
      const _this = this;
      _this.$refs.sdk.getsFocusWindow({uuid: _this.uuid}, function (res) {
        _this.lResId = res.data.lResId;
      });
    },
    // 停止实时预览
    stopRealPlay: function () {
      const _this = this;
      _this.$refs.sdk.stopPreviewing({uuid: _this.uuid, resID: _this.lResId}, function (res) {
      });
    },
    // 开启实时预览
    openRealPlay: function () {
      const _this = this;
      const camera = this.searchChannelIdByCameraIp(this.realPlayCameraIp);
      const openPlayParam = {
        dwChannelID: camera.dwChannelID,
        dwStreamType: 0,
        dwLinkMode: 1,
        dwFluency: 0,
        resID: _this.lResId,
        UserID: _this.userId,
        uuid: _this.uuid
      }
      _this.$refs.sdk.openPreviewing(openPlayParam, function (res) {
      });
    },
    // 设备注销
    logout: function () {
      const _this = this;
      _this.$refs.sdk.devLoginOut({UserID: _this.userId, uuid: _this.uuid}, function (res) {
        _this.userId = -1;
        _this.findHandle = -1;
        _this.cameraList = [];
        _this.lResId = -1;
      });
    },
    // 按摄像头IP地址搜索是摄像头通道编号
    searchChannelIdByCameraIp: function (realPlayCameraIp) {
      const cameraList = this.cameraList;
      for (const element of cameraList) {
        const tempCameraIp = element.szChnName.split('_')[0];
        if (tempCameraIp === realPlayCameraIp) {
          return element;
        }
      }
    }
  }
}
</script>

<style scoped>
/*控件*/
.ocxStyle {
  width: 1000px;
  margin: 30px auto;
}

#playerContainer {
  width: 800px;
  height: 500px;
  background: #000;
  color: #fff;
}

</style>